<template>
  <div style="margin: 0 20px;">
    <div style="margin: 0 0 15px 0; padding: 10px 20px;border: 1px solid #ccc; border-radius: 3px; background: #efeeee; color: #666;">
      <p style="margin: 0; padding: 0;">提示：后台服务存在定时任务，如果长时间未支付，订单将会被取消</p>
    </div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="ID" width="60"/>
      <el-table-column prop="receiverName" label="收货人" width="100"/>
      <el-table-column prop="receiverPhone" label="收货电话" width="150"/>
      <el-table-column prop="receiverAddress" label="收货地址" :show-overflow-tooltip="true"/>
      <el-table-column prop="goodsNum" label="商品数量" width="100"/>
      <el-table-column prop="totalPrice" label="商品总价" width="100"/>
      <el-table-column prop="gmtCreate" label="下单时间" width="200"/>
      <el-table-column prop="orderState" label="订单状态" width="180">
        <template slot-scope="scope">{{orderStateText[scope.row.orderState]}}</template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" :disabled="scope.row.orderState != 0"
                     @click="pay(scope.row)">支付
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderStateText: ["待支付", "已支付，待发货", "已发货，待收货", "确认收货，已完成", "用户关闭", "卖家关闭", "系统调度关闭"],
      loginInfo: {
        token: ''
      },
      tableData: [],
      orderListUrl: 'http://localhost:19282/orders',
      alipayUrl: 'http://localhost:19282/alipay/pay'
    }
  },
  methods: {
    loadLoginInfo() {
      let loginInfoString = localStorage.getItem('alipay_loginInfo');
      if (!loginInfoString) {
        this.$alert('请先登录！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.$router.push('/alipay/login');
            return;
          }
        });
      }
      this.loginInfo = JSON.parse(loginInfoString);
    },
    pay(order) {
      let params = {
        outTradeNo: order.id,
        subject: '学茶商城订单支付',
        totalAmount: order.totalPrice
      }
      window.open(this.alipayUrl + '?' + this.qs.stringify(params));
    },
    loadOrderList() {
      this.axios
          .create({'headers': {'Authorization': this.loginInfo.token}})
          .get(this.orderListUrl).then((response) => {
        this.tableData = response.data.data.list;
      });
    }
  },
  created() {
    this.loadLoginInfo();
  },
  mounted() {
    this.loadOrderList();
  }
}
</script>